<!-- 提现选择账号 -->
<template>
	<div class="select-account">
		<!-- 银行卡、paypal列表为空 -->
    <div 
      class="bg-fff account-select p-16 c-p flex a-c j-sb" 
      v-if="(accountType == 1 && cardAccountList.length == 0) || (accountType == 2 && paypalAccountList.length == 0)" 
      @click="addOpen">
      <!-- 未选择时 -->
      <div class="flex a-c">
        <Icon type="ios-add-circle-outline col-888 f-32 lin-32" />
        <div class="ml-16 col-888 f-14 lin20">
          {{ $t('setting.withdrawClickSelect') }}
        </div>
      </div>
      <Icon type="ios-arrow-down f-16 lin-16 col-d8d" />
    </div>
    <!-- 银行卡、paypal列表有数据、点击显示 -->
    <Poptip 
      v-else  
      style="width: 100%;" 
      class="account-poptip" 
      trigger="click" 
      placement="bottom-start" 
      v-model="tipShow"
      >
      <div class="bg-fff account-select plr-16 c-p flex a-c j-sb">
        <!-- 未选择时 -->
        <div class="flex a-c" v-if="accountObj && !accountObj.id">
          <Icon type="ios-add-circle-outline col-888 f-32 lin-32" />
          <div class="ml-16 col-888 f-14 lin20">
            {{ $t('setting.withdrawClickSelect') }}
          </div>
        </div>
        <!-- 选择时 -->
        <div class="flex a-c f-1" v-if="accountObj && accountObj.id">
          <!-- 银行卡 -->
          <div class="flex a-c" v-if="accountType == 1">
            <div class="selects-card">
              <div class="flex a-c">
                <!-- 收款币种 -->
                <div class="flex a-c j-c col-fff f-10 lin-10 bg-222 plr-4 br-2 currency-item">
                  {{accountObj.currency || ''}}
                </div>
                <!-- 开户行 -->
                <div class="ml-8 col-888 f-12 lin-17">
                  {{accountObj.payeeBank || ''}}
                </div>
              </div>
              <!-- 开户姓名 -->
              <div class="mt-4 col-222 f-16 lin-22 bold">
                {{accountObj.payeeName || ''}}
              </div>
              <div class="flex a-c mt-4 f-14 lin-20 col-888">
                <!-- 银行卡号 -->
                <div>
                  {{accountObj.payeeAccount || ''}}
                </div>
                <div class="mlr-10" v-if="accountObj.countryCode">
                  |
                </div>
                <!-- 国家 -->
                <div v-if="accountObj.countryCode">
                  {{accountObj.countryCode || ''}}
                </div>
                <div class="mlr-10" v-if="accountObj.swiftCode">
                  |
                </div>
                <!-- swift代码 -->
                <div v-if="accountObj.swiftCode">
                  {{accountObj.swiftCode || ''}}
                </div>
              </div>
            </div>
          </div>
          <!-- paypal -->
          <div class="flex a-c" v-if="accountType == 2">
            <img class="selects-icon" src="@/assets/images/user/account-paypal.png" alt="">
            <div class="ml-16 col-222 bold f-14 lin-20">
              {{ accountObj.payPalAccount || '' }}
            </div>
          </div>
        </div>
        <Icon type="ios-arrow-down f-16 col-d8d" />
      </div>
      <div slot="content" class="poptip-content ptb-8">
        <!-- 银行卡 -->
        <div v-if="accountType == 1">
          <div
            v-for="(item,index) in cardAccountList" :key="index"
            class="popptip-item"
            >
            <account-item 
              :item="item" 
              @editItem="editOpen"
              @clickItem="popptipChange"
              >
            </account-item>
          </div>
        </div>
        <!-- paypal -->
        <div v-if="accountType == 2">
          <div
            v-for="(item,index) in paypalAccountList" :key="index"
            class="popptip-item"
            >
            <paypal-item 
              :item="item" 
              @editItem="editOpen"
              @clickItem="popptipChange"
              >
            </paypal-item>
          </div>
        </div>
      </div>
    </Poptip>
    <!-- 银行卡 - 新增、编辑 -->
		<card-edit ref="cardRef" @editSuccess="refreshList"></card-edit>
		<!-- paypal - 新增、编辑 -->
		<paypal-edit ref="paypalRef" @editSuccess="refreshList"></paypal-edit>
	</div>
</template>

<script>
  import { userCardList } from "@/api/card";
  import accountItem from '@/views/main/user/account-setting/account-item';
  import paypalItem from '@/views/main/user/account-setting/paypal-item';
  import cardEdit from '@/views/main/user/account-setting/card-edit';
  import paypalEdit from '@/views/main/user/account-setting/paypal-edit';

	export default{
		data(){
			return{
				cardAccountList:[],//银行卡列表
        paypalAccountList:[],//payPal列表
        tipShow:false,
        accountObj:{},//选择的账号数据
			}
		},
		components:{
			accountItem,
      paypalItem,
      cardEdit,
      paypalEdit
		},
		props:{
			accountType:{
        type:[Number,String],
        default:''
      },
      //第一次请求，有默认地址则选中 1银行卡 2paypal
      firstType:{
        type:[Number,String],
        default:''
      }
		},
		created(){
			this.getCardList();
      this.getPaypalList();
		},
		methods:{
      //获取银行卡账户列表
      getCardList(){
        userCardList({payeeType:1}).then(res => {
          this.cardAccountList = res.result;
          if(this.firstType == 1){
            let num = 0;
            res.result.forEach(item => {
              if(item.isDefault && item.countryCode && item.swiftCode){
                this.accountObj = item;
                this.sendId(item);
              }else{
                num++;
              }
            })
            if(num == res.result.length){
              let iIndex = res.result.findIndex(item => item.countryCode && item.swiftCode);
              if(iIndex != -1){
                this.accountObj = res.result[iIndex];
                this.sendId(res.result[iIndex]);
              }
            }
          }
        })
      },
      //获取paypal账户列表 first是否是第一次请求
      getPaypalList(){
        userCardList({payeeType:2}).then(res => {
          this.paypalAccountList = res.result;
          if(this.firstType == 2){
            let num = 0;
            res.result.forEach(item => {
              if(item.isDefault){
                this.accountObj = item;
                this.sendId(item);
              }else{
                num++;
              }
            })
            if(num == res.result.length){
              this.accountObj = res.result[0];
              this.sendId(res.result[0]);
            }
          }
        })
      },
			//新增提现账号
      addOpen(){
        this.tipShow = false;
        if(this.accountType == 1){//银行卡
          this.$refs.cardRef.open();
          return;
        }
        this.$refs.paypalRef.open();
      },
      //编辑
      editOpen(e){
        this.tipShow = false;
        if(this.accountType == 1){//银行卡
          this.$refs.cardRef.open(e);
          return;
        }
        this.$refs.paypalRef.open(e);
      },
      // 刷新列表
      refreshList(){
        if(this.accountType == 1){//银行卡
          this.getCardList();
          return;
        }
        this.getPaypalList();
      },
      //选择账号
      popptipChange(item){
        this.tipShow = false;
        this.accountObj = item;
        this.sendId(item);
      },
      //发送id给父组件
      sendId(item){
        this.$emit('idSend',item)
      },
      //重置选项
      init(){
        if(this.accountType == 1){
          this.getAccountDefault('cardAccountList');
          return;
        }
        this.getAccountDefault('paypalAccountList');
      },
      //选择默认地址
			getAccountDefault(key){
				let list = this[key];
				if(list.length){
          let num = 0;
					list.forEach(item => {
            if(key == 'cardAccountList'){
              if(item.isDefault && item.countryCode && item.swiftCode){
                this.accountObj = item;
                this.sendId(item);
              }else{
                num++;
              }
            }else if(key == 'paypalAccountList'){
              if(item.isDefault){
                this.accountObj = item;
                this.sendId(item);
              }else{
                num++;
              }
            }
					})
          if(num == list.length){
            if(key == 'cardAccountList'){
              let iIndex = list.findIndex(item => item.countryCode && item.swiftCode);
              if(iIndex != -1){
                this.accountObj = list[iIndex];
                this.sendId(list[iIndex]);
              }
            }else if(key == 'paypalAccountList'){
              this.accountObj = list[0];
              this.sendId(list[0]);
            }
          }
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.select-account{
    .account-select{
      width: 100%;
      min-height: 100px;
      border: 1px solid #E2E2E2;
      .selects-icon{
        width: 32px;
        height: 32px;
      }
      .selects-card{
        .currency-item{
          height:18px;
        }
      }
    }
    .account-poptip{
      position: relative;
      /deep/ .ivu-poptip-rel{
        width: 100%;
      }
      /deep/ .ivu-poptip-body{
        padding: 0;
      }
      /deep/ .ivu-poptip-popper{
        width: 100%;
      }
      /deep/ .ivu-poptip-arrow{
        display: none;
      }
      .poptip-content{
        width: 100%;
        max-height: 316px;
        min-height: 116px;
        overflow-y: auto;
        .popptip-item{
          width: 100%;
          &:hover{
            background: #F5F5F5;
          }
        }
      }
    }
  }
</style>